導(dǎo)讀:人類在回憶所看到過(guò)的場(chǎng)景和事物時(shí),對(duì)色彩的記憶度要高于形態(tài)。也就是說(shuō),從視覺(jué)角度來(lái)看,一款產(chǎn)品給用戶留下深的印象往往是界面的配色。由此我們也能夠看出配色可以說(shuō)是設(shè)計(jì)師
發(fā)表日期:2020-03-31
文章編輯:興田科技
瀏覽次數(shù):7613
標(biāo)簽:
人類在回憶所看到過(guò)的場(chǎng)景和事物時(shí),對(duì)色彩的記憶度要高于形態(tài)。也就是說(shuō),從視覺(jué)角度來(lái)看,一款產(chǎn)品給用戶留下深的印象往往是界面的配色。由此我們也能夠看出配色可以說(shuō)是設(shè)計(jì)師重要的武器,很可能沒(méi)有之一,但是這個(gè)武器有使用的「限制」。
UI設(shè)計(jì)的一個(gè)基本原則就是避免頁(yè)面中出現(xiàn)過(guò)多的顏色,這個(gè)道理大家都懂,但是在真正自己設(shè)計(jì)的時(shí)候總是會(huì)下意識(shí)的引入過(guò)多的顏色,導(dǎo)致整個(gè)界面看起來(lái)非常的雜亂。所以對(duì)于設(shè)計(jì)師來(lái)說(shuō),學(xué)會(huì)給界面的配色做減法是很重要的一項(xiàng)技能。
配色體系的目的
給一款產(chǎn)品建立配色體系之前,設(shè)計(jì)師先要弄明白的是:我為什么要建立配色體系?這個(gè)問(wèn)題聽(tīng)起來(lái)十分多余而且稍顯無(wú)厘頭。但是在我看來(lái),每次做東西之前常問(wèn)自己為什么可以更好的提高工作效率。只有真正理解了配色的意義,我們才可以做到有的放矢,進(jìn)行有選擇性的刪減。
視覺(jué)區(qū)分
調(diào)整界面風(fēng)格
吸引用戶注意力
視覺(jué)區(qū)分
一個(gè)App或網(wǎng)站可能會(huì)有好幾個(gè)主要且同級(jí)別的功能和分區(qū)。這時(shí),設(shè)計(jì)師需要對(duì)產(chǎn)品的信息內(nèi)容和功能模塊進(jìn)行整體規(guī)劃,建立界面的基本格局來(lái)幫助用戶在視覺(jué)上進(jìn)行更好的區(qū)分。配色可以很好的幫助設(shè)計(jì)師實(shí)現(xiàn)這一目標(biāo)。
例如,一款理財(cái)類應(yīng)用中有不同種類的理財(cái)產(chǎn)品(普通型,隨借隨還型和可轉(zhuǎn)讓型)和不同的狀態(tài)(投資確認(rèn)中,投資成功已起息,清算中等合計(jì)11種狀態(tài))。
在這種情況下(3種產(chǎn)品類型,11種產(chǎn)品狀態(tài)),配色就要很小心了。先我們要對(duì)狀態(tài)進(jìn)行整合,相似的狀態(tài)整合成一種,這樣可以減少顏色的數(shù)量。當(dāng)然會(huì)有人感覺(jué)六種顏色還是多,因?yàn)闀?shū)本上告訴我們同一頁(yè)面中配色不要超過(guò)三種。但是我們得從實(shí)際情況出發(fā),對(duì)于理財(cái)產(chǎn)品來(lái)說(shuō),用戶不太可能在同一屏中看到全部的六種狀態(tài),也就是說(shuō)用戶同時(shí)看到六種顏色的概率很小。
視覺(jué)風(fēng)格
產(chǎn)品的視覺(jué)風(fēng)格是根據(jù)其自身定位和用戶需求所決定的,有的產(chǎn)品要求界面具有活力,能讓用戶產(chǎn)生興奮感(購(gòu)買(mǎi)欲望),我們可以使用光波較長(zhǎng)紅色和橙色來(lái)作為產(chǎn)品的主色調(diào)。
文字的跳躍率是指同一界面中不同文字之間的大小比率。不同功能的文字在排版設(shè)計(jì)的時(shí)候會(huì)有字號(hào)和字重的區(qū)別,例如主標(biāo)題,副標(biāo)題和正文的字號(hào)通常是依次減小的,這種字號(hào)的差異會(huì)帶來(lái)不同的文字跳躍率。一般來(lái)說(shuō),文字跳躍率高的界面會(huì)顯得比較活潑,文字跳躍率低的界面會(huì)顯得平靜沉著。
在配色的時(shí)候,如果我們減少色彩的使用數(shù)目,大面積使用白,灰,黑或者其他同色相配色(藍(lán)色與淺藍(lán)色,紅色與粉紅色等),這樣的界面會(huì)顯得莊重高雅且富有現(xiàn)代感,但是會(huì)顯得單調(diào)。那么我們就應(yīng)該適度的提升文字跳躍率給界面提升一些活力。
吸引用戶注意力
我們經(jīng)常喜歡使用配色來(lái)吸引用戶注意力,以下圖中行為召喚按鈕(call to action)為例,配以與背景色差距較大的顏色使其可以從背景中凸顯出來(lái)。
谷歌搜索的主頁(yè)出現(xiàn)了大面積的留白,用戶的目光自然就會(huì)被吸引到搜索框。這和谷歌的初衷相契合,他們希望用戶在這個(gè)頁(yè)面完成搜索操作,所以不用展示過(guò)多其他的信息來(lái)分散用戶的注意力。
更多新聞
2023
介紹當(dāng)今互聯(lián)網(wǎng)時(shí)代,擁有一個(gè)專業(yè)、易用且獨(dú)一無(wú)二的網(wǎng)站對(duì)于企業(yè)的發(fā)展至關(guān)重要。。網(wǎng)站建設(shè)定制流程是指...
View details
2023
在當(dāng)今數(shù)字化的時(shí)代,擁有一個(gè)專業(yè)的網(wǎng)站對(duì)于任何企業(yè)都至關(guān)重要。。通過(guò)一個(gè)精心設(shè)計(jì)的網(wǎng)站,企業(yè)可以展示...
View details
2020
如果評(píng)選這三年的幾個(gè)流行的核心關(guān)鍵詞,一定少不了:轉(zhuǎn)型。在這個(gè)突變、巨變的時(shí)代里,每個(gè)人、每個(gè)企業(yè)都面臨著巨大的機(jī)遇與挑戰(zhàn)。 個(gè)人要學(xué)**,要改變,企業(yè)要學(xué)**,要轉(zhuǎn)型。轉(zhuǎn)型到
View details
2023
引言對(duì)于遂寧的企業(yè)主和網(wǎng)站所有者來(lái)說(shuō),遂寧網(wǎng)站優(yōu)化是一個(gè)至關(guān)重要的策略。。隨著互聯(lián)網(wǎng)的快速發(fā)展和競(jìng)爭(zhēng)...
View details